<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>滴滴打车游戏</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	html{
		height: 100%;
		font-size: 20px;
	}
	#box{
		position: relative;
		width: 100%;
		height: 100%;
		background-size: 100%;
	}
	#pic{
		width: 100%;
		height: 100%;
	}
	#car{
		position: absolute;
        left: 30%;
        top: 60%;
        animation:car 5s ease-in-out;
	}
	@keyframes car{
		0%{
			opacity: 0;
		}
		70%{
			opacity: 0.3;
		}
		90%{
			opacity: 0.6;
		}
		100%{
			opacity: 1;
		}
	}
	#game{
		position: absolute;
		left: 30%;
		top: 75%;
	}
	#zhang{
		position: absolute;
		top: 10%;
		left: 15%;
		/*animation:zhang 2s ease-in-out;*/
		animation-duration:1s;
		animation-name:zhang;
	}
	@keyframes zhang{
		0%{
			transform:scale(2);
            transform:rotateZ(2000px);

		}
		90%{
			transform:scale(1.7);
            transform:rotateZ(1000px);
		}
		
		100%{
			transform:scale(1);
            transform:rotateZ(0px);


		}
	}
	</style>
</head>
<body>
	<div id="box">
		<img id="pic" src="img/home.png" alt="">
		<img id="car" src="img/car2.png" alt="">
		<img id="game" src="img/kaishi.png" alt="">
		<img id="zhang" src="img/gaizhang.png" alt="">
	</div>
</body>
<script>
	box.style.width=document.documentElement.clientWidth + 'px';
	box.style.height=document.documentElement.clientHeight + 'px';

	var game=document.getElementById('game');

	game.onclick=function(){
//		alert('跳转');
	window.open("http://192.168.0.148:8020/qiao-shuo-guang/%E6%BB%B4%E6%BB%B4%E6%89%93%E8%BD%A6%E5%85%B3%E5%8D%A1/%E5%85%B3%E5%8D%A1.html","_self");

	}


</script>
</html>








